<template>
  <main>
    <!-- 头部部分 -->
    <header class="flex items-center justify-around bg-white" style="border-bottom: 1px solid var(--el-border-color)">
      <!-- Logo部分开始 -->
      <section class="flex justify-center items-center">
        <img src="../../assets/fpa_logo_compressed.png" class="w-12 h-12" alt="" />
        <span class="antialiased" style="margin-left:5px">自由编程协会开源社区</span>
      </section>

      <!-- Logo部分结束 -->
      <!-- 菜单部分开始 -->
      <el-menu :default-active="activeIndex" :router="true" class="el-menu-demo w-1/2" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/">
          <template #title>
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/blog">
          <template #title>
            <el-icon>
              <Grid />
            </el-icon>
            <span>博客</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/ie">
          <template #title>
            <el-icon>
              <HelpFilled />
            </el-icon>
            <span>面经</span>
          </template>

        </el-menu-item>
        <el-menu-item index="/leave">
          <template #title>
            <el-icon>
              <CircleCloseFilled />
            </el-icon>
            <span>请假</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/active">
          <template #title>
            <el-icon>
              <Ticket />
            </el-icon>
            <span>活动</span>
          </template>
        </el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>关于</span>
          </template>
          <el-menu-item index="/resume">简介</el-menu-item>
          <el-menu-item index="/developer">开发者</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <!-- 菜单部分结束 -->
      <!-- 登录注册按钮开始 -->
      <section class="w-32 h-12 flex justify-center items-center">
        <el-button type="primary" size="large" round>登录</el-button>
        <el-button type="danger" size="large" round>注册</el-button>
      </section>
      <!-- 登录注册按钮结束 -->
    </header>
    <section class="p-6">
      <transition name="slide-left" mode="out-in">
        <RouterView />
      </transition>
    </section>
    <footer> </footer>
  </main>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  HomeFilled,
  Setting,
  Ticket,
  InfoFilled,
  HelpFilled,
  Grid,
  CircleCloseFilled
} from '@element-plus/icons-vue'
const activeIndex = ref('/')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
    
    <style scoped>

.slide-left-enter {
    opacity: 0;
    -webkit-transform: tr+anslate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }
</style>